<template>
	<view class="container pb-200 fs-28 pt-20">
		<view class="plr-20">
			<view class="bg-white p-20 box-shadow radius-10 dis-flex center mb-10">
				<view class="flex-full">
					<view class="fs-32">名称：<text class="can-select">{{pageData.info.name}}</text></view>
					<view class="ptb-10">iccid：<text class="can-select">{{pageData.info.iccid||'--'}}</text></view>
					<view class="ptb-10">imei：<text class="can-select">{{pageData.info.deviceCode}}</text></view>
					<view class="ptb-10">productKey：<text class="can-select">{{pageData.info.productKey}}</text></view>
					<view class="ptb-10">deviceName：<text class="can-select">{{pageData.info.deviceName}}</text></view>
					<view class="ptb-10">信号：<text>{{pageData.info.signal?`${pageData.info.signal}dbm`:'--'}}</text></view>
					<view>电量：<text>{{pageData.info.battery?`${pageData.info.battery}%`:'--'}}</text></view>
				</view>
				<view class="dis-flex center pl-20">
					<text :class="Util.parseDeviceStatusClass(pageData.info.status)">{{Util.parseDeviceStatusTxt(pageData.info.status)}}</text>
				</view>
			</view>
			
			<view class="sticky-tabs fs-32 dis-flex center justify-start bg-page" style="padding:10px 20px;margin: 0 -20px;">
				<view class="plr-20 pb-20" v-for="(tab,i) in pageData.tabs" :key="i" :class="{'tab-on-bar':i===pageData.currentTab,'ml-30':i>0}" @click="changeTab(i)">{{tab.name}}</view>
			</view>
			<template v-if="currentTabItem.logs.length>0">
				<view v-for="(li,i) in currentTabItem.logs" :key="i">
					<template v-if="currentTabItem.url==='deviceLog'">
						<view class="ptb-10 se-thin-txt mt-20">时间：{{li.createTime}}</view>
						<view class="bg-white p-20 box-shadow radius-10">
							<view class="dis-flex column">
								<text class="se-thin-txt mb-6">topic：</text>
								<text style="word-break: break-all;">{{li.topic}}</text>
							</view>
							<view class="dis-flex column mt-10">
								<text class="se-thin-txt mb-6">information：</text>
								<text style="word-break: break-all;">{{li.information}}</text>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="bg-white p-20 box-shadow radius-10" :class="i>0?'mt-20':''">
							<view class="dis-flex center">
								<view>操作时间：{{li.createTime}}</view>
								<view>
									<text class="se-main" v-if="li.openFlag==1">开启</text>
									<text class="se-red" v-else>关闭</text>
								</view>
							</view>
						</view>
					</template>
				</view>
				
				<uni-load-more v-if="currentTabItem.logs.length>10" :status="currentTabItem.loadStatus"></uni-load-more>
			</template>
			<empty v-else height="40vh" tips="暂无操作记录"></empty>
		</view>
		
		<view class="p-3020 bg-white w-full dis-flex center pos-f bottom-0 box-shadow">
			<button class="w-250" :disabled="pageData.info.status==2" :class="pageData.info.timingFlag==0?'btn-stork':'btn-stork-red'" @click="operateTime">{{pageData.info.timingFlag==0?'启动':'关闭'}}定时器</button>
			<button class="w-300" :disabled="pageData.info.status==2" :class="pageData.info.openFlag==0?'btn-fill':'btn-red'" @click="operateOpen">设备{{pageData.info.openFlag==0?'启动':'关闭'}}</button>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,nextTick,computed,unref} from 'vue';
	import { onReachBottom,onLoad } from '@dcloudio/uni-app'
	import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import Empty from '@/components/empty.vue';
	import Util from '@/common/util.js'
	
	let pageData=reactive({
		info:{},
		tabs:[
			{
				name:'操作日志',
				url:'deviceLog',
				logs:[],
				loadStatus:'loading',
				loaded:false,
				page:1,
				size:20,
				totalPage:0
			},{
				name:'设备日志',
				url:'operateLog',
				logs:[],
				loadStatus:'loading',
				loaded:false,
				page:1,
				size:20,
				totalPage:0
			},
		],
		currentTab:0
	});
	
	let currentTabItem=computed(()=>{
		return pageData.tabs[pageData.currentTab]
	})
	
	function getLogs(id){
		let {page,size,url}=unref(currentTabItem);
		currentTabItem.value.loadStatus='loading'
		Util.ajaxGet(`/api/blDevice/${url}`,{needToken:false,data:{id,page,size}}).then(res=>{
			let {rows,totalPage}=res;
			if(page==1){
				currentTabItem.value.totalPage=totalPage;
				currentTabItem.value.logs=rows;
				currentTabItem.value.loaded=true;
			}else{
				currentTabItem.value.logs.push(...rows)
			}
			currentTabItem.value.loadStatus=totalPage>page?'more':'noMore';
		});
	}
	function changeTab(i){
		pageData.currentTab=i;
		nextTick(()=>{
			uni.pageScrollTo({
				scrollTop:0,
				duration:10
			})
			if(!currentTabItem.value.loaded){
				getLogs(pageData.info.id);
			}
		})
	}
	function getInfo(id){
		Util.ajaxGet('/api/blDevice/deviceInfo',{needToken:false,data:{id}}).then(res=>{
			pageData.info=res;
		});
		nextTick(()=>{
			setTimeout(()=>{
				changeTab(0)
			},200)
		})
	}
	
	function operateOpen(){
		let {id,openFlag}=pageData.info;
		Util.ajaxPost('/api/blDevice/openDevice',{needToken:false,data:{id,status:openFlag==1?0:1}}).then(res=>{
			pageData.tabs[0].page=1;
			pageData.tabs[1].page=1;
			pageData.tabs[0].loaded=false;
			pageData.tabs[1].loaded=false;
			
			nextTick(()=>{
				setTimeout(()=>{
					getInfo(id);
				},200)
			})
		});
	}
	function operateTime(){
		let {id,timingFlag}=pageData.info;
		let state=timingFlag==1?0:1;
		Util.ajaxPost('/api/blDevice/timingFlag',{needToken:false,data:{id,timingFlag:state}}).then(res=>{
			Util.showToast((state==0?'关闭':'启动')+'操作成功！');
			pageData.info.timingFlag=state
		});
	}
	
	onReachBottom(()=>{
		let {page,totalPage}=unref(currentTabItem);
		if(totalPage>page){
			currentTabItem.value.page++;
			getLogs(pageData.info.id);
		}
	});
	onLoad(({id})=>{
		getInfo(id);
	})
</script>

<style>

</style>
